<template>
	<view class="user-bg" style="width: 100vw; background-color: white; padding-bottom: 16px;">
		<view class="flex-row flex-between flex-items-center"
			style="margin-left: 16px; margin-right: 16px; padding-top: 72px;">
			<view class="flex-row flex-items-center">
				<image v-if="headStatus == 0" src='../../../static/user/u5.png'
					style="width: 64px; height: 64px; border-radius: 32px; border: 1px solid rgba(49,60,86,0.8); margin-left: 16px;">
				</image>
				<image v-if="headStatus == 1" :src="head"
					style="width: 64px; height: 64px; border-radius: 32px; border: 1px solid rgba(49,60,86,0.8); margin-left: 16px;">
				</image>
				<view class="flex-column" style="margin-left: 8px;">
					<text class="font-22 font-weight-medium" style="color: #313C56;">{{ nickname }}</text>
					<view class="flex-row flex-wrap">
						<view class="font-12 font-weight-regular flex-column flex-items-center"
							style="color: #6B7885; background-color: #F7F9FD; height: 18px; padding-left: 8px; padding-right: 8px; border-radius: 9px; margin-right: 8px;">
							BOSS {{bossLevel }}
						</view>
						<view class="font-12 font-weight-regular flex-column flex-items-center"
							style="color: #6B7885; background-color: #F7F9FD; height: 18px; padding-left: 8px; padding-right: 8px; border-radius: 9px; margin-right: 8px;">
							数字游民 {{digitalLevel }}
						</view>
					</view>
				</view>
			</view>
			<text class="font-14 font-weight-regular" style="color: #EB7520; white-space: nowrap;"
				@click="tap(2)">个人主页</text>
		</view>

		<!--		<view class="flex-row" style="margin-left: 16px; margin-top: 16px;">-->
		<!--			<view class="flex-column">-->
		<!--				<text class="font-16 font-weight-bold" style="color: #313C56;">7</text>-->
		<!--				<text class="font-14 font-weight-regular" style="color: #6B7885;">BOSS信用</text>-->
		<!--			</view>-->
		<!--			<view class="flex-column" style="margin-left: 36px;">-->
		<!--				<text class="font-16 font-weight-bold" style="color: #313C56;">17</text>-->
		<!--				<text class="font-14 font-weight-regular" style="color: #6B7885;">游民信用</text>-->
		<!--			</view>-->
		<!--		</view>-->

		<view class="flex-row flex-items-center flex-between user-bg1"
			style="margin-left: 16px; margin-right: 16px; height: 80px; margin-top: 16px; color: white;"
			@click="tap(9)">
			<view class="flex-column" style="margin-left: 16px;">
				<text class="font-14 font-weight-regular">SPX</text>
				<text class="font-22 font-weight-medium">{{ user.usdtAmount }}</text>
			</view>
			<view class="flex-column" style="margin-left: 16px;">
				<text class="font-14 font-weight-regular">USDT</text>
				<text class="font-22 font-weight-medium">{{ user.spxAmount }}</text>
			</view>
			<view class="flex-row-center font-12"
				style="margin-right: 16px; color: #EB7520; height: 26px; width: 100px; background-color: white; border-radius: 13px;">
				钱包管理
			</view>
		</view>

		<view class="flex-row flex-wrap" style="">

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(10)">
				<image :src="`/static/user/publish-task.png`" style="width: 40px; height: 40px; margin-left: 20px;">
				</image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">我发布的任务</text>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(11)">
				<image :src="`/static/user/accept-task.png`" style="width: 40px; height: 40px; margin-left: 20px;">
				</image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">我接收的任务</text>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:'130px'}"
				@click="tap(12)">
				<image :src="`/static/user/company.png`" style="width: 40px; height: 40px; margin-left: 20px;"></image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: '#95A4B3'}">我的公司</text>
				<view class="flex-row flex-between" style="margin-left: 20px; margin-right: 16px; margin-top: 3px;">
					<text style="color: #313C56;"> {{ !user.company ? '暂无' : user.company }}</text>
					<view v-if="!user.company" class="flex-row flex-items-center">
						<text style="color: #EB7520;">创建</text>
						<image src="../../../static/user/arrow-yellow-right.png" style="width: 16px; height: 16px;">
						</image>
					</view>
				</view>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:'130px'}"
				@click="tap(13)">
				<image :src="`/static/user/team.png`" style="width: 40px; height: 40px; margin-left: 20px;"></image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: '#95A4B3'}">我的团队</text>
				<view class="flex-row flex-between" style="margin-left: 20px; margin-right: 16px; margin-top: 3px;">
					<text style="color: #313C56;"> {{ !user.team ? '暂无' : user.team }}</text>
					<view v-if="!user.team" class="flex-row flex-items-center">
						<text style="color: #EB7520;">创建</text>
						<image src="../../../static/user/arrow-yellow-right.png" style="width: 16px; height: 16px;">
						</image>
					</view>
				</view>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(14)">
				<image :src="`/static/user/invate.png`" style="width: 40px; height: 40px; margin-left: 20px;"></image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">邀请好友</text>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(15)">
				<image :src="`/static/user/recoard.png`" style="width: 40px; height: 40px; margin-left: 20px;"></image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">交易记录</text>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(16)">
				<image :src="`/static/user/setting.png`" style="width: 40px; height: 40px; margin-left: 20px;"></image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">设置</text>
			</view>

			<view class="flex-column flex-center user-item" style="" :style="{width: itemWidth, height:''}"
				@click="tap(17)">
				<image :src="`/static/user/userAboutme.png`" style="width: 40px; height: 40px; margin-left: 20px;">
				</image>
				<text style="margin-left: 20px; margin-top: 3px;" :style="{color: ''}">关于我们</text>
			</view>

		</view>
		<toast ref="toast" title=""></toast>
	</view>
</template>

<script>
	import {
		getUserCenter
	} from "../../../api";

	export default {
		name: "user",
		data() {
			return {
				user: {
					"company": "",
					"team": "",
					"usdtAmount": "0",
					"spxAmount": "0",
				},
				headStatus: 0,
				userId: '',
				bossLevel: '',
				digitalLevel: '',
				head: '',
				nickname: 'TS User',
				list: [
					//   {
					// 	icon: 'userBank',
					// 	name: '银行卡'
					// },
				]
			};
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.toolbarHeight - 5
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			},
			itemWidth() {
				const width = (this.screenWidth - 49) / 2.0
				return this.$uv.addUnit(width)
			}
		},
		mounted() {
			this.getUser()
		},
		methods: {
			show() {
				this.getUser()
			},
			clearUserData() {
				this.user = {
					"company": "",
					"team": "",
					"usdtAmount": "0",
					"spxAmount": "0",
				}
				this.userId = ''
				this.bossLevel =''
				this.digitalLevel = ''
				this.nickname = 'TS User'
				this.headStatus = 0
				this.head = ''
				this.userId = ''
			},
			getUser() {
				getUserCenter().then((data) => {
					if (data) {
						this.user = data
						this.userId = data.id
						this.bossLevel = data.bossLevel
						this.digitalLevel = data.digitalLevel
						this.nickname = data.nickname
						if (data.headUrl) {
							this.headStatus = 1
							this.head = data.headUrl
							this.userId = data.id
						}
					}
				}).catch((res) => {})
			},
			/**
			 * 点击事件
			 * index
			 */
			tap(index) {
				if (!this.userId) {
					this.$refs.toast.show({
						msg: '请登录后继续操作!'
					})
					return
				}
				var pageUrl = ''
				if (index == 2) {
					pageUrl = '/pages/person-detail/person-detail?userId=' + this.userId + "&type=2"
				} else if (index == 10) {
					pageUrl = '/pages/task-posted/task-posted'
				} else if (index == 11) {
					pageUrl = '/pages/task-accept/task-accept'
				} else if (index == 9) {
					pageUrl = '/pages/wallet/wallet'
				} else if (index == 12) {
					if (this.user.company) {
						pageUrl = `/pages/company-detail/company-detail?id=${this.user.companyId}&sys=${1}`

					} else {
						// 创建公司
						pageUrl = '/pages/creat-company/creat-company'
					}

				} else if (index == 13) {
					if (this.user.team) {
						pageUrl = `/pages/company-detail/company-detail?id=${this.user.teamId}&sys=${1}`

					} else {
						// 创建团队
						pageUrl = '/pages/creat-team/creat-team'
					}
				} else if (index == 16) {
					pageUrl = '/pages/setting/setting'
				} else {
					return
				}
				uni.navigateTo({
					url: pageUrl
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-bg1 {
		background-image: url('../../../static/userBg3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.user-item {
		height: 100px;
		background-color: #F7F9FD;
		border-radius: 12px;
		margin-left: 16px;
		margin-top: 16px;
		color: #6B7885;
		font-size: 14px;
		font-weight: 400;
	}

	.user-bg {
		background-image: url('../../../static/userBg2.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>